<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件对象三大属性之一state</title>
</head>
<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    // 1.类式组件
  class Weather extends React.Component {
    // 构造器调用几次？ 页面有几个实例组件，调用几次
    // 这里1次
    constructor(props) {
      super(props)
      // 初始化状态
      this.state = {isHot: false, wind: '微风'}
    }
    // render调用几次？ 1+n次 1初始化 n是状态更新次数
    render() {
      // 读取状态
      console.log(this);
      // 匿名函数
      return <h2 onClick={() => this.changeWeather()}>今天天气很{this.state.isHot ? '炎热' : '凉爽'},{this.state.wind}</h2>
    }
    // 调用几次？事件触发几次掉用几次
    changeWeather() {
      // changeWeather放在了哪里？Weather的原型对象上，供实例使用
      // 由于changeWeather上作为onClick的回调，所以不是通过实例调用的，上直接调用
      // 类中的方法默认开启了严格模式，所以changeWeather中的this为underfided

      // console.log(this);
      // let isHot = this.state.isHot
      // 错误方式修改state状态数据
      // this.state.isHot = !isHot
      // console.log(this.state.isHot);

      // 状态需要通过setState修改, 且更新上一种合并，不是替换
      this.setState({isHot: !this.state.isHot})
    }
   }
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>